import React, { Component } from 'react';
import { good_favlist, good_unfav } from '../utils/api'
import { Toast,Ellipsis } from "antd-mobile";
import {store} from '../store/index'
import {request_cancel_collect_action} from '../store/actionCreator'

import {connect} from 'react-redux'

class Collect extends Component {

    cancel_collect(item){
        this.props.do_cancel_collect(item) 
    }

    render() {
        return (
            <div className='collect'>
                <div className="top">
                    <span className='iconfont icon-fanhuijiantou' onClick={()=>{this.props.history.push('/index/mine')}}></span>
                    <span>我的收藏</span>
                </div>
                <ul>
                    {
                        this.props.collectlist.map((item, index) => {
                            return (
                                <li key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className="right">
                                    <Ellipsis className="name" direction='end' rows={2} content={item.name} />
                                        {/* <div className="name">{item.name}</div> */}
                                        <i>原价￥270</i>
                                        <div className="end">
                                            <p><span>活动价</span>￥{item.salesPrice.value}</p>
                                            <button onClick={()=>{this. cancel_collect(item)}}>取消收藏</button>
                                        </div>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

//connect 负责将当前Collect组件和redux store连接起来, 当store中的数据发生改变时, 当前组件会立即更新
export default connect(
    (state)=>{ //将store中的数据注入到组件属性中(props)
        return {
            collectlist: state.collectlist
        }
    },
    (dispatch)=>{ //将dispatch以方法的形式 注入到组件属性中(props)
        return {
            do_cancel_collect(params){
                dispatch( request_cancel_collect_action(params) )
            }
        }
    }
)( Collect );